<template>
  <KView class="shop-cart-goods-item">
    <slide-cell v-model="goods.isShow" :btns="btns" @btn-click="btnClick" @slide-open="slideOpen">
      <KView class="goods-item-content" @click="itemClick">
        <KView class="goods-item-check" v-if="goods.status===1" @click.stop>
          <sys-checkbox v-model="goods.checked" @change="checkChange"></sys-checkbox>
        </KView>
        <KView class="goods-item-pic">
          <sys-image :src="goods.pic" mode="auto" :radius="8"></sys-image>
        </KView>
        <KView class="goods-item-info" :class="{'disabled':goods.status!==1}">
          <KView class="goods-item-name ellipsis">{{goods.name}}</KView>
          <KView class="goods-item-modelName ellipsis">{{goods.modelName}}</KView>
          <KView class="goods-item-footer" v-if="goods.status===1">
            <KView class="goods-item-price">
              <span class="price-unit">¥</span>
              <span class="price-num">{{goods.price}}</span>
            </KView>
            <KView class="goods-item-count" @click.stop>
              <sys-input-number v-model="goods.buyCount" :min="1" :max="goods.totalCount" :precision="0" @change="countChange">
              </sys-input-number>
            </KView>
          </KView>
        </KView>
        <KView v-if="goods.status!==1" class="goods-item-invalid flex-central">
          <KView>失效</KView>
        </KView>
      </KView>
    </slide-cell>
  </KView>
</template>

<script>
  import SlideCell from 'common/slideCell';
  import SysCheckbox from 'common/sysCheckbox';
  import SysImage from 'common/sysImage';
  import SysInputNumber from 'common/sysInputNumber';

  export default {
    props: {
      goods: {
        type: Object,
        required: true
      }
    },

    data() {
      return {
        btns: [{
          id: 'delete',
          label: '删除',
          color: '#ffffff',
          bgColor: '#ff0000'
        }]
      };
    },

    methods: {
      countChange() {
        this.$emit('count-change', this.goods);
      },

      btnClick({
        id
      }) {
        if (id === 'delete') {
          this.$emit('delete-goods', this.goods);
        }
      },

      slideOpen() {
        this.$emit('slide-open', this.goods);
      },

      checkChange() {
        this.goods.checkChange();
      },

      itemClick() {
        this.$emit('item-click', this.goods);
      }
    },

    components: {
      SlideCell,
      SysCheckbox,
      SysImage,
      SysInputNumber
    }
  };

</script>

<style lang="scss">
  .shop-cart-goods-item {
    height: formatPx(165);
    display: flex;

    .goods-item-content {
      display: flex;
      height: 100%;
      flex-wrap: nowrap;
      padding: 0 formatPx(20);

      .goods-item-check {
        width: formatPx(40);
        margin-right: formatPx(20);
      }

      .goods-item-pic {
        width: formatPx(165);
        height: formatPx(165);
      }

      .goods-item-info {
        margin-left: formatPx(20);
        min-width: 0;
        flex: 1;

        .goods-item-name {
          font-size: formatPx(30);
          color: #2f3135;
          margin-bottom: formatPx(15);
        }

        .goods-item-modelName {
          font-size: formatPx(21);
          color: #b3b9c2;
          margin-bottom: formatPx(20);
        }

        .goods-item-footer {
          height: formatPx(40);

          .goods-item-price {
            color: #FF641F;
            float: left;
            height: 100%;

            .price-unit {
              font-size: formatPx(32);
              line-height: formatPx(40);
              margin-right: formatPx(5);
            }

            .price-num {
              font-size: formatPx(40);
              line-height: formatPx(40);
            }
          }

          .goods-item-count {
            height: 100%;
            width: formatPx(140);
            float: right;
          }
        }

        &.disabled {
          padding-top: formatPx(20);

          .goods-item-name {
            margin-bottom: formatPx(30);
          }
        }
      }

      .goods-item-invalid {
        width: formatPx(102);
        margin-left: formatPx(10);

        >div {
          width: formatPx(102);
          height: formatPx(102);
          line-height: formatPx(102);
          background: #F6F6F6;
          color: #999999;
          font-size: formatPx(26);
          border-radius: formatPx(51);
          text-align: center;
        }
      }
    }
  }

</style>
